<!-- eslint-disable vue/multi-word-component-names -->

<template>
    <div class="box">
    <span> <img @click="goBack" class="Back"  src="../../assets/icon/hdpi/fh.png" alt=""></span>
     <span class="purse1">钱包</span>
     <router-link to="bang">
        <span class="purse2">查看绑定</span>
     </router-link>
     
     <div class="purse3">
       <h3 class="purse4">我的H币</h3>
        <h1 class="purse5">{{ newBalance }} </h1>
        <span class="purse6">(满200元可体现)</span>
        <router-link to="withdraw">
            <button class="purse7">提现</button>
        </router-link>
     </div>

     <div class="interrogation1" style="display: flex;justify-content: space-between">
       <div>
            <p>问诊咨询</p>
            <li >2018.11.10</li>
       </div>
        <div class="price">
            <p >+500H币</p>
        </div>
     </div> 


     <div class="interrogation1" style="display: flex;justify-content: space-between">
       <div>
            <p>病友圈建议被采纳</p>
            <li >2018.11.10</li>
       </div>
        <div class="price">
            <p >+100H币</p>
        </div>
     </div> 

     <div class="interrogation1" style="display: flex;justify-content: space-between">
       <div>
            <p>提现所扣金额</p>
            <li >2019.10.11</li>
       </div>
        <div class="price">
            <p >-{{ withdrawAmount }}H币</p>
        </div>
     </div> 
    </div>
  
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { computed, ref } from 'vue';  
import { useRoute } from 'vue-router'; 
const route = useRoute();   
const withdrawAmount = parseFloat(route.query.withdrawAmount as string) || 0.00;  

const initialBalance = ref(1000.00); // 假设的初始余额，实际应用中可能来自Vuex
const router = useRouter(); 
localStorage.setItem('money', withdrawAmount.toString())

// 计算新余额  
const newBalance = computed(() => {  
    
  return initialBalance.value - withdrawAmount;  
  
}); 
function goBack() {  
      // 使用router.go(-1)模拟浏览器的后退操作  
      router.push('/manage');  
    }
</script>
<style>
*{
   margin: 0;
   padding: 0;
   list-style: none;
}

.box
{
    width: 100%;
    height: 100%;
}

.Back
{
    width: 30px;
    height: 30px;
}
.purse1{
    font-size: 18px;
    margin-left: 138px;
}
.purse2{
    font-size: 12px;
    position: absolute;
    top: 38px;
    margin-left: 80px;
}
.purse3{
    width: 100%;
    height: 200px;
   background: linear-gradient(to right, #3db2f3, #2796e9,#1f80e1);
   margin-top: 30px;
   border-radius: 4%;
   margin-left: 30px;
}
.purse4{
    font-size: 20px;
    color: #fff;
    position: absolute;
    top: 120px;
    left: 50px;
}
.purse5{
    position: absolute;
    color: #fff;
    top: 150px;
    left: 50px;
    font-size: 48px;

}
.purse6{
    position: absolute;
    top: 230px;
    color: #fff;
    left: 50px;
    font-size: 13px;

}
.purse7{
    width: 80px;
    height: 35px;
    background: #fff;
    position: absolute;
    top: 220px;
    left: 240px;
    border: none;
    border-radius: 8%;
    color: #1f80e1;
}
.interrogation1{
    width: 90%;
    margin-top: 20px;
    margin-left: 30px;
}
.interrogation1 p{
    font-size: 16px;
}
.interrogation1 span{
    font-size: 16px;
    color: #fa99b2;
    position: absolute;
    top: 322px;
    right: 30px;
}
.interrogation1 li{
    font-size: 12px;
}
.interrogation2{
    position: absolute;
    top: 380px;
    right: 30px;
    font-size: 16px;
     color: #fa99b2;
}

.price
{
    color: #fa99b2;
}

</style> 